<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../assets/custom/css/iconfont.css"/>

    <link href="../../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css"/>
    <style>
        .input-icon.right>i {
            margin-top: 9px;
            color: #666;
            cursor: pointer;
        }
        .defaultBox {
            background: #fff;
            position: absolute;
            width: 600px;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0,0,0,.23);
        }
        .percent50 {
            width: 50%;
            float: left;
            padding: 0 5px;
        }
        .percent25 {
            width: 25%;
            float: left;
            padding: 0 5px;
        }
        .percent13 {
            width: 13%;
            float: left;
            padding: 0 5px;
        }
    </style>
</head>
<body>
<div class="portlet-body">
    <div class="form-body">
        <div class="form-group" >
            <span class="col-xs-2 form-label">数据源类型:</span>
            <div class="col-xs-9">
                <span class="label_on">HttpRest接口</span>
            </div>
        </div>
        <div class="form-group" >
            <span class="col-xs-2 form-label"><font class="formRequired">*</font>数据源类型:</span>
            <div class="col-xs-10">
                <input type="text">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4  form-label">API厂商:</span>
                    <div class="col-xs-8 ">
                        <select class="bs-select form-control">
                            <option>无</option>
                            <option>海康威视R8700</option>
                            <option>万维易源</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4  form-label">数据签名方法:</span>
                    <div class="col-xs-8">
                        <select class="bs-select form-control">
                            <option>无</option>
                            <option>海康威视R8700</option>
                            <option>万维易源</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group" >
            <span class="col-xs-2 form-label"><font class="formRequired">*</font>URL:</span>
            <div class="col-xs-10">
                <input type="text">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4  form-label">Client Id:</span>
                    <div class="col-xs-8 ">
                        <input type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <span class="col-xs-4  form-label">Client  Secret:</span>
                    <div class="col-xs-8">
                        <div class="input-icon right">
                            <i class="iconfont icon-mimaxianshi togglePassword"></i>
                            <input type="password" class="form-control">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">认证</li>
                <li>默认系统级参数</li>
                <li>业务属性</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                        <div class="left_tree" style="width: 180px;position: absolute; padding: 0 10px 10px 0;border-right: 1px solid #888;">
                            <h3 class="sub margin-bottom-20">类型</h3>
                            <div class="margin-bottom-20" style="height: 200px;">
                                <select class="bs-select form-control" id="OAuthType">
                                    <option>OAuth 2.0</option>
                                    <option>Base OAuth</option>
                                    <option>无需认证</option>
                                </select>
                            </div>

                            <button class="btn blue-hoki widthFull">请求测试</button>
                        </div>
                        <div class="right_content" style="margin-left: 180px;min-height: 310px">
                            <div class="margin-top-20">
                                <div class="OAuth2">
                                    <div class="form-group" >
                                        <span class="col-xs-3 form-label">授权数据添加到:</span>
                                        <div class="col-xs-9">
                                            <select class="bs-select form-control">
                                                <option>RequestHeaders</option>
                                                <option>RequestUrl</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <h3 class="sub form-label col-xs-3">获取新Token方法</h3>
                                    </div>
                                    <div class="form-group" >
                                        <span class="col-xs-3 form-label">Grant Type:</span>
                                        <div class="col-xs-9">
                                            <select class="bs-select form-control" id="grantType">
                                                <option>Authorization Code</option>
                                                <option>Client Credentials</option>
                                                <option>由其他程序负责</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="authorizationCode">
                                        <div class="form-group" >
                                            <span class="col-xs-3 form-label">Grant A:</span>
                                            <div class="col-xs-9">
                                                <input type="text">
                                            </div>
                                        </div>
                                        <div class="form-group" >
                                            <span class="col-xs-3 form-label">Grant A:</span>
                                            <div class="col-xs-9">
                                                <input type="text">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="clientCredentials display_none">
                                        <div class="form-group" >
                                            <span class="col-xs-3 form-label">Grant B:</span>
                                            <div class="col-xs-9">
                                                <input type="text">
                                            </div>
                                        </div>
                                        <div class="form-group" >
                                            <span class="col-xs-3 form-label">Grant B:</span>
                                            <div class="col-xs-9">
                                                <input type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="othersProcedure display_none">
                                        <div class="form-group" >
                                            <span class="col-xs-3 form-label paddingZeroL">授权页URL:<br>（本参数仅用于认证测试）</span>
                                            <div class="col-xs-9">
                                                <textarea class="form-textarea"></textarea>
                                                <div>例如:https://mp.weixin.qq.com/cgi-bin/componentloginpage?component\_appid=xxxx&pre\_auth\_code=xxxxx&redirect\_uri=xxxx&auth\_type=xxx</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix" >
                                        <span class="col-xs-3 form-label paddingZeroL">Client Authentication:</span>
                                        <div class="col-xs-9">
                                            <select class="bs-select form-control">
                                                <option>Send client Credentials in body</option>
                                                <option>Send as basic Auth header</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="baseOAuth display_none">
                                    <div class="form-group" >
                                        <span class="col-xs-3 form-label">用户名:</span>
                                        <div class="col-xs-9">
                                            <input type="text">
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <span class="col-xs-3 form-label">密码:</span>
                                        <div class="col-xs-9">
                                            <div class="input-icon right">
                                                <i class="iconfont icon-mimaxianshi togglePassword"></i>
                                                <input type="password" class="form-control">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <h3 class="sub form-label col-xs-3">使用代理</h3>
                                    </div>
                                    <div class="form-group" >
                                        <span class="col-xs-3 form-label">Proxy  Host:</span>
                                        <div class="col-xs-9">
                                            <input type="text">
                                        </div>
                                    </div>
                                    <div class="clearfix" >
                                        <span class="col-xs-3 form-label">Proxy  Port:</span>
                                        <div class="col-xs-9">
                                            <input type="text" class="widthFull">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                </div>
                <div class="layui-tab-item">
                    <div class="from_control">
                        <div class="from_control_r">
                            <button class="btn blue-hoki">排序</button>
                            <button class="btn blue-hoki">添加</button>
                            <button class="btn default">删除</button>
                        </div>
                    </div>

                    <table class="layui-table layui-table-view">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>类型</th>
                            <th>默认值</th>
                            <th>参数添加到</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>showapi_timestamp</td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">String</option>
                                    <option value="OUT">Number</option>
                                    <option value="INOUT">byte[]</option>
                                </select>
                            </td>
                            <td><a class="tableHref" href="javascript:;">人生就像是一场修行</a></td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">Parameters</option>
                                    <option value="OUT">Body</option>
                                    <option value="INOUT">Headers</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>showapi_appid</td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">String</option>
                                    <option value="OUT">Number</option>
                                    <option value="INOUT">byte[]</option>
                                </select>
                            </td>
                            <td><a class="tableHref" href="javascript:;">人生就像是一场修行</a></td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">Parameters</option>
                                    <option value="OUT">Body</option>
                                    <option value="INOUT">Headers</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>showapi_sign</td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">String</option>
                                    <option value="OUT">Number</option>
                                    <option value="INOUT">byte[]</option>
                                </select>
                            </td>
                            <td><a class="tableHref" href="javascript:;">人生就像是一场修行</a></td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">Parameters</option>
                                    <option value="OUT">Body</option>
                                    <option value="INOUT">Headers</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>showapi_res_gzip</td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">String</option>
                                    <option value="OUT">Number</option>
                                    <option value="INOUT">byte[]</option>
                                </select>
                            </td>
                            <td><a class="tableHref" href="javascript:;">人生就像是一场修行</a></td>
                            <td>
                                <select class="bs-select form-control" >
                                    <option value="IN">Parameters</option>
                                    <option value="OUT">Body</option>
                                    <option value="INOUT">Headers</option>
                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                    <div class="margin-top-20">
                        <div class="form-group">
                            <label class="col-xs-2 form-label">业务类型:</label>
                            <div class="col-sm-8">
                                <div class="mt-checkbox-inline">
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox"  value=""> 来源库
                                        <span></span>
                                    </label>
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox"  value=""> 中心前置库
                                        <span></span>
                                    </label>
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" value=""> 中心标准库
                                        <span></span>
                                    </label>
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" value=""> 共享输出库
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 form-label">所属机构:</label>
                            <div class="col-sm-8">
                                <select  class="form-control select2">
                                    <optgroup label="Alaskan">
                                        <option value="AK">Alaska</option>
                                        <option value="HI" disabled="disabled">Hawaii</option>
                                    </optgroup>
                                    <optgroup label="Pacific Time Zone">
                                        <option value="CA">California</option>
                                        <option value="NV">Nevada</option>
                                        <option value="OR">Oregon</option>
                                        <option value="WA">Washington</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 form-label">所属系统:</label>
                            <div class="col-sm-8">
                                <select  class="form-control select2">
                                    <optgroup label="Alaskan">
                                        <option value="AK">Alaska</option>
                                        <option value="HI" disabled="disabled">Hawaii</option>
                                    </optgroup>
                                    <optgroup label="Pacific Time Zone">
                                        <option value="CA">California</option>
                                        <option value="NV">Nevada</option>
                                        <option value="OR">Oregon</option>
                                        <option value="WA">Washington</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="margin-top-10">
            <div style='text-align:center;'>
                <button class="btn btn-primary" type="submit" style="height: 33px; width: 80px;">保存</button>
                <button class="btn default"style="height: 33px; width: 80px;">取消</button>
            </div>
        </div>

    </div>
</div>
<!--<div class="defaultBox">
    <div class="form-body">
        <div class="form-group">
            <div class="percent25">
                <select class="bs-select form-control toggleType">
                    <option>系统变量</option>
                    <option>常量</option>
                </select>
            </div>
        </div>
        <div class="form-group defaultVariable">
            <div class="percent25">
                <select class="bs-select form-control toggleClient">
                    <option>clientId</option>
                    <option>clientSecrct</option>
                    <option>clientTime(当前时间)</option>
                    <option>generateDefaultSign(数字签名)</option>
                </select>
            </div>
            <div class="currentTime">
                <div class="percent13">
                    <select class="bs-select form-control">
                        <option>+</option>
                        <option>-</option>
                    </select>
                </div>
                <div class="percent13">
                    <input type="text">
                </div>
                <div class="percent13">
                    <select class="bs-select form-control">
                        <option>年</option>
                        <option>月</option>
                        <option>日</option>
                        <option>小时</option>
                        <option>分</option>
                    </select>
                </div>
                <span class="fl label_on">格式:</span>
                <div class="percent25">
                    <select class="bs-select form-control">
                        <option>毫秒数(LongTime)</option>
                        <option>YYYY-MM-dd</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="form-group display_none defaultConstant">
            <div class="percent50">
                <input type="text">
            </div>
        </div>
        <div class="form-group-last clearfix">
            <div class="fr">
                <button class="btn blue-hoki defaultBoxConfirm">确认</button>
                <button class="btn default defaultBoxCancel">取消</button>
            </div>
        </div>
    </div>
</div>-->
</body>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>


<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>
<script src="../../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>

<script src="../../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>
<script>
    $('#grantType').on('changed.bs.select', function (e, clickedIndex) {
        console.log(clickedIndex);
        if(clickedIndex === 0){
            $(".clientCredentials").addClass("display_none");
            $(".othersProcedure").addClass("display_none");
            $(".authorizationCode").removeClass("display_none");
        }else if(clickedIndex === 1){
            $(".clientCredentials").removeClass("display_none");
            $(".othersProcedure").addClass("display_none");
            $(".authorizationCode").addClass("display_none");
        }else {
            $(".clientCredentials").addClass("display_none");
            $(".othersProcedure").removeClass("display_none");
            $(".authorizationCode").addClass("display_none");
        }
    });

    $('#OAuthType').on('changed.bs.select', function (e, clickedIndex) {
        console.log(clickedIndex);
        if(clickedIndex === 0){
            $(".baseOAuth").addClass("display_none");
            $(".OAuth2").removeClass("display_none");
        }else if(clickedIndex === 1){
            $(".baseOAuth").removeClass("display_none");
            $(".OAuth2").addClass("display_none");
        }else {
            $(".baseOAuth").addClass("display_none");
            $(".OAuth2").addClass("display_none");
        }
    });

    //密码显示隐藏
    $(".togglePassword").click(function () {
        if( $(this).hasClass("icon-mimaxianshi")){
          $(this).removeClass("icon-mimaxianshi").addClass("icon-mimayincang");
          $(this).next().prop("type","text");
        }else if( $(this).hasClass("icon-mimayincang")){
            $(this).removeClass("icon-mimayincang").addClass("icon-mimaxianshi");
            $(this).next().prop("type","password");
        }

    });

    //点击默认值
    $("td .tableHref").click(function (event) {
        //删除box
        $('.defaultBox').remove();
        //如果没有打开box
        if(!$(this).hasClass("open")){

            $(this).addClass("open");

            var left = $(this).offset().left - 270 + "px";
            var top = $(this).offset().top - 180 + "px";

            var defaultBoxString = "<div style='left: "+left+";top: "+top+";' class=\"defaultBox\">\n" +
                "    <div class=\"form-body\">\n" +
                "        <div class=\"form-group\">\n" +
                "            <div class=\"percent25\">\n" +
                "                <select class=\"bs-select form-control toggleType\">\n" +
                "                    <option>系统变量</option>\n" +
                "                    <option>常量</option>\n" +
                "                </select>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"form-group defaultVariable\">\n" +
                "            <div class=\"percent25\">\n" +
                "                <select class=\"bs-select form-control toggleClient\">\n" +
                "                    <option>clientId</option>\n" +
                "                    <option>clientSecrct</option>\n" +
                "                    <option>clientTime(当前时间)</option>\n" +
                "                    <option>generateDefaultSign(数字签名)</option>\n" +
                "                </select>\n" +
                "            </div>\n" +
                "            <div class=\"currentTime\">\n" +
                "                <div class=\"percent13\">\n" +
                "                    <select class=\"bs-select form-control\">\n" +
                "                        <option>+</option>\n" +
                "                        <option>-</option>\n" +
                "                    </select>\n" +
                "                </div>\n" +
                "                <div class=\"percent13\">\n" +
                "                    <input type=\"text\">\n" +
                "                </div>\n" +
                "                <div class=\"percent13\">\n" +
                "                    <select class=\"bs-select form-control\">\n" +
                "                        <option>年</option>\n" +
                "                        <option>月</option>\n" +
                "                        <option>日</option>\n" +
                "                        <option>小时</option>\n" +
                "                        <option>分</option>\n" +
                "                    </select>\n" +
                "                </div>\n" +
                "                <span class=\"fl label_on\">格式:</span>\n" +
                "                <div class=\"percent25\">\n" +
                "                    <select class=\"bs-select form-control\">\n" +
                "                        <option>毫秒数(LongTime)</option>\n" +
                "                        <option>YYYY-MM-dd</option>\n" +
                "                    </select>\n" +
                "                </div>\n" +
                "            </div>\n" +
                "\n" +
                "        </div>\n" +
                "        <div class=\"form-group display_none defaultConstant\">\n" +
                "            <div class=\"percent50\">\n" +
                "                <input type=\"text\">\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"form-group-last clearfix\">\n" +
                "            <div class=\"fr\">\n" +
                "                <button class=\"btn blue-hoki defaultBoxConfirm\">确认</button>\n" +
                "                <button class=\"btn default defaultBoxCancel\">取消</button>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "</div>";

            //加载到dom
            $(document.body).append(defaultBoxString);
            $('.bs-select').selectpicker();

            //点击确认
            $(".defaultBoxConfirm").click(function () {
                console.log("确认");
                return false;
            });


            //点击取消
            $(".defaultBoxCancel").click(function () {
                $('.defaultBox').remove();
                $(".open").removeClass("open");
                return false;
            });

            //切换常量和系统变量
            $('.toggleType').on('changed.bs.select', function (e, clickedIndex) {

                if(clickedIndex === 0){
                    $(".defaultVariable").removeClass("display_none");
                    $(".defaultConstant").addClass("display_none");
                }else if(clickedIndex === 1){
                    $(".defaultVariable").addClass("display_none");
                    $(".defaultConstant").removeClass("display_none");
                }
                return false;
            });

            //切换client
            $('.toggleClient').on('changed.bs.select', function (e, clickedIndex) {

                if(clickedIndex === 2){
                    $(".currentTime").removeClass("display_none");
                }else {
                    $(".currentTime").addClass("display_none");
                }
                return false;
            });

        }else {
            $(this).removeClass("open");
        }

    })
</script>
</html>